<template>
  <view class="upload-box">
    <view class="upload-item" v-for="(item, index) in imageLists" :key="index">
      <image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
    </view>
    <view class="upload-item" @click="uploadImage">
      <u-icon name="/static/icon/icon-plus.png" size="36rpx" color="#999"></u-icon>
      <view class="margin-top-xs">
        <u-text align="center" size="24rpx" color="#999" :text="placeholder"></u-text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';

const props = defineProps({
  placeholder: {
    type: String,
    default: '点击上传'
  }
});
const emit = defineEmits(['update:modelValue']);

const imageLists = ref([]);

//上传作业条图片
const uploadImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    success: (res) => {
      imageLists.value.push(res.tempFilePaths);
      emit('update:modelValue', imageLists.value);
    }
  });
};

//预览作业条图片
const previewImage = (item) => {
  uni.previewImage({
    urls: imageLists.value,
    current: item
  });
};
</script>
<style lang="scss" scoped>
.upload-box {
  display: flex;
  flex-wrap: wrap;
  gap: 30rpx;
  margin-top: 30rpx;

  .upload-item {
    width: 160rpx;
    height: 160rpx;
    border-radius: 30rpx;
    background: #F7F7F7;
    border: solid 1px #d8d8d8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: solid 1px #d8d8d8;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>